<template>
    <div class="classify">
        <!-- <headers :title="'全部分类'"/> -->
        <div class="claasify-content">
            <div class="left-classify">
                <div class="item" 
                    :class="index == idx && 'active'" 
                    v-for="(item, index) in typeList" 
                    :key=index
                    @click="toggle(index,item.id)"
                >{{item.name}}</div>
            </div>
            <div class="right-content">
                <div v-if="mainList.length>0" class="title">{{mainList[0].pname}}</div>
                <div class="right-list">
                    <div class="right-item" v-for="(item, index) in mainList" :key=index>
                        <div @click="fetchGoodsList(item.id)">
                            <img :src="item.img" alt="">
                            <div class="label">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import axios from '@/api/request'
// import headers from "@/components/header.vue" 
export default {
    name: "classify",
    data () {
        return {
            idx: 0,
            typeList: [],
            mainList: [],
            classifyId:'',
            userId: '',
        }
    },
    components: {
        // headers
    },
	created(){
        this.userId = this.$route.query.userId
        if(!this.userId){
            this.userId = localStorage.getItem('userId')
        }
		this.fetchFirstList();
	},
    methods: {
        toggle (index,id) {
            this.idx = index;
            this.fetchSecondList(id);
            this.classifyId = id;
        },
        //获取一级目录列表
        fetchFirstList() {
			var self = this;
			axios('/device/kind/listRoot','post',{}).then(res=>{
				if(res.data.code==1000){
					// console.log(res)
					self.typeList = res.data.data;
		            self.fetchSecondList(res.data.data[0].id);
                    self.classifyId = res.data.data[0].id;
				}
			})		
		},			
        //获取二级目录列表
        fetchSecondList(id) {
			var self = this;
			axios('/device/kind/getByPid/'+id,'post',{}).then(res=>{
				if(res.data.code==1000){
					console.log(res)
					self.mainList = res.data.data;
				}
			})		
        },		
        fetchGoodsList(id){
            this.$router.push({path:'goodsList',query:{kindId:id,userId:this.userId}})
        }	
    }
}
</script>

<style lang="less" scoped>
    .classify {
        .claasify-content {
            display: flex;
            .left-classify {
                width: 210/75rem;
                .item {
                    background-color: #F3F4F6;
                    font-size: 30/75rem;
                    color: #444;
                    height: 106/75rem;
                    line-height: 106/75rem;
                    text-align: center;
                    box-sizing: border-box;
                    border: 1px solid #ccc;                    
                    &:not(:last-child) { border-bottom: none; }
                    width: 100%;
                    &.active {
                        background-color: #fff;
                        color: #ff4444;
                        border-right: 1px solid #fff;
                        &:last-child {
                            border-right: none;
                            border-bottom: none;
                        }
                    }
                }
            }
            .right-content {
                flex: 1;
                width: 0;
                .title {
                    height: 106/75rem;
                    line-height: 106/75rem;
                    text-align: center;
                    font-size: 26/75rem;
                    color: #444;
                    width: 100%;
                    position: relative;
                    margin-bottom: 30/75rem;
                    &:before {
                        content: "";
                        width: 45/75rem;
                        height: 1px;
                        position: absolute;
                        left: 2.05rem;
                        background-color: #888;
                        bottom: 50%
                    }
                    &:after {
                        content: "";
                        width: 45/75rem;
                        height: 1px;
                        position: absolute;
                        background-color: #888;
                        right: 2.05rem;
                        bottom: 50%
                    }
                }
                .right-list {
                    display: flex;
                    flex-wrap: wrap;
                    .right-item {
                        text-align: center;
                        // flex-grow: 1;
                        width: 33%;
                        padding:0 4px;
                        box-sizing: border-box;
                        margin-bottom: 88/75rem;
                        img {height: 95/75rem;width:100%; margin-bottom: 30/75rem;}
                        div {font-size: 26/75rem; color: #444; }
                    }
                }
            }
        }
        
    }
</style>

